$(function () {
    choose('.category');
});

let chooseCssObj = {
    'background-color': '#FF90CA',
    'color': '#FFFFFF'
}

let notChooseCssObj = {
    'background-color': '#FFFFFF',
    'color': '#808080'
}

function choose(dom = '') {
    if (typeof dom == 'string') {
        $(dom).each(function (key, item) {
            if (!key) {
                //    background-color: #FF90CA;
                $(item).css(chooseCssObj);
            }
        });
    } else {
        $('.category').each(function (key, item) {
            $(item).css(notChooseCssObj);
            $(item).find('img').attr('src','./icon/category.png');
        });
        $(dom).css(chooseCssObj);
        $(dom).find('img').attr('src','./icon/heart-red.png');
    }
}

function animate(item, x, y, index) {
    dynamics.animate(item, {
        translateX: x,
        translateY: y
    }, {
        type: dynamics.spring,
        duration: 800,
        frequency: 120,
        delay: 100 + index * 30
    });
}

minigrid('.list-group', '.list-item', 10, animate);
this.getlist();

function getlist() {
    var items = '';
    for (let index = 0; index < 20; index++) {
        // items += ` <div class="list-item">
        //         <div>
        //             <img src="./image/ceshi/${Math.floor(Math.random()*5+1)}.jpg" alt=""></div>
        //         <div class="content">
        //             <div>最近很喜欢一首歌，往后余生，风雪是你，平淡是你。</div>
        //             <div>其他内容</div>
        //             <div>按钮哦</div>
        //         </div>
        //     </div>`;

        items += `<div class="list-item">
            <div><img src="./image/ceshi/5.jpg" alt=""></div>
            <div class="content">
                <p class="title text-wrap">
                    最近很喜欢一首歌，往后余生，风雪是你，平淡是你
                </p>
                <div class="user">
                    <div class="avatar">
                        <img src="./image/qrcode-bg.jpg" alt="">
                    </div>
                    <div class="nickname">
                        <p class="text-wrap">用户昵称用户昵称用户昵称用户昵称用户昵称</p>
                    </div>
                    <div class="like">
                        <div>
                            <img src="./icon/heart-red.png" alt="">
                        </div>
                        <div>
                            <p class="text-wrap">123</p>
                        </div>
                    </div>
                </div>
            </div>
        </div>`;
        $(".list-group").html(items)
    }
    minigrid('.list-group', '.list-item', 10, animate);
}
